<template>
	<view class="me">
		<view class="head">
			<image src="../../static/logo.png" mode=""></image>
			<view class="head-info"> 
				<view class="head-info-phone">{{baseInfo?baseInfo.mobile:phone}}</view>
				<view v-if="baseInfo">{{baseInfo.city}} | 在线 | {{baseInfo.chinese+baseInfo.math+baseInfo.english+baseInfo.synthesize}}</view>
			</view>
		</view>
		
		<view class="head-tabar">
			<view class="head-tabar-title">
				<u-icon name="clock" class='icon-clock' color="#ff9900" size='40'></u-icon> 正在试用中 <view class="vip-info"  @click="goto('../pages/buyVip')">VIP介绍</view>
			</view>
			<view class="head-list">
				<view @click="goto('../pages/basicInfo', 0)"><image src="../../static/basic.png" mode=""></image><view>基本资料</view></view>
				<view @click="goto('../pages/basicInfo', 1)"><image src="../../static/cheng.png" mode=""></image><view>我的成就</view></view>
				<view><image src="../../static/biao.png" mode=""></image><view>志愿草表</view></view>
				<view><image src="../../static/care.png" mode=""></image><view>关注</view></view>
			</view>
		</view>
		
		<u-cell-group>
			<u-cell-item icon="integral-fill" title="购买VIP" @click="goto('../pages/buyVip')"><view class="me-cell-btn">马上买</view></u-cell-item>
			<u-cell-item icon="server-man" title="专属客服" @click="goto('../pages/customerService')"></u-cell-item>
		</u-cell-group>
		
		<view class="me-cell">
			<u-cell-group>
				<u-cell-item icon="question-circle-fill" title="常见问题" @click="goto('../pages/problem')"></u-cell-item>
				<u-cell-item icon="email-fill" title="意见反馈" @click="goto('../pages/feedback')"></u-cell-item>
				<u-cell-item icon="setting-fill" @click="goto('../pages/agreement')" title="协议"></u-cell-item>
				<u-cell-item icon="share-fill" title="分享好友"></u-cell-item>
				<u-cell-item icon="man-add-fill" title="关于我们"></u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseInfo: '',
				phone: ''
			}
		},
		onLoad() {
			this.check_my_info();
			this.phone = uni.getStorageSync('phone');
		},
		methods: {
			goto(name, type) {
				uni.navigateTo({
					url: name+"?current="+ type
				});
			},
			check_my_info() {
				this.http({
					url: `api/v1/users/check_my_info`,
					method: 'GET',
					success: res => {
						if(res.errcode == 0) {
							if(res.result.grade_detail){
								this.baseInfo = res.result.grade_detail;
							}
						}
					},
				})
			},
		}
	}
</script>

<style lang="less">
	.me {
		height: 100vh;
		background-color: #F5F5F5;
		.head {
			padding: 30rpx 20rpx;
			padding-bottom: 140rpx;
			background-color: #FFFFFF;
			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				vertical-align: text-top;
			}
			.head-info {
				display: inline-block;
				height: 100rpx;
				vertical-align: text-top;
				margin-left: 20rpx;
				font-size: 26rpx;
				padding-top: 2rpx;
				.head-info-phone {
					font-size: 40rpx;
					margin-bottom: 10rpx;
				}
			}
		}
		.head-tabar {
			border-radius: 30rpx;
			overflow: hidden;
			width: calc(100% - 40rpx);
			margin-left: 20rpx;
			padding-bottom: 30rpx;
			margin-top: -100rpx;
			background-color: #FFFFFF;
			margin-bottom: 20rpx;
			.head-tabar-title {
				height: 90rpx;
				line-height: 90rpx;
				padding: 0 30rpx;
				background-color: #599595;
				color: #FFFFFF;
				.icon-clock {
					float: left;
					margin-top: 26rpx;
					margin-right: 20rpx;
				}
				.vip-info {
					float: right;
					height: 46rpx;
					line-height: 46rpx;
					margin-top: 22rpx;
					border-radius: 50rpx;
					padding: 0 20rpx;
					background-color: #ff9900;
					font-size: 24rpx;
				}
			}
			.head-list {
				display: flex;
				flex-wrap:wrap;
				justify-content:space-around;
				text-align: center;
				>view {
					padding-top: 30rpx;
				}
				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
		.me-cell {
			margin-top: 20rpx;
			.me-cell-btn {
				float: right;
				background-color: #ff9900;
				color: #FFFFFF;
				font-size: 20rpx;
				height: 30rpx;
				line-height: 28rpx;
				padding: 2rpx 10rpx;
				border-radius: 50rpx;
			}
		}
	}
</style>
